﻿
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加信息</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css" href="~/common/layui/css/layui.css" media="all">
    <link rel="stylesheet" type="text/css" href="~/common/bootstrap/css/bootstrap.css" media="all">
    <link rel="stylesheet" type="text/css" href="~/common/global.css" media="all">
    <link rel="stylesheet" type="text/css" href="~/css/personal.css" media="all">
</head>
<body class="childrenBody">
    <form class="layui-form " id="form_data">
        <div class="layui-form-item col-lg-5">
            <div class="layui-inline">
                <label class="layui-form-label">用户名称:</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="name" lay-verify="required|username" placeholder="如:张三" type="text">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">用户昵称:</label>
                <div class="layui-input-block">
                    <input class="layui-input" name="NiceName" lay-verify="required|username" placeholder="如:知无涯" type="text">
                </div>
            </div>
        </div>
        <div class="layui-form-item col-lg-5">
            <label class="layui-form-label">手机号:</label>
            <div class="layui-input-block">
                <input class="layui-input" name="PhoneNumber" lay-verify="required|phone" placeholder="请输入手机号" type="text">
            </div>
        </div>
        <div class="layui-form-item col-lg-5">
            <label class="layui-form-label">密码:</label>
            <div class="layui-input-block">
                <input class="layui-input" name="Password" lay-verify="required|pwd" placeholder="请输入密码" type="password">
            </div>
        </div>
        <div class="layui-form-item col-lg-5">
            <label class="layui-form-label">邮箱:</label>
            <div class="layui-input-block">
                <input class="layui-input" name="Email" lay-verify="required|email" placeholder="请输入邮箱" type="text">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="gender" value="1" title="男" checked="">
                <div class="layui-unselect layui-form-radio layui-form-radioed">
                    <i class="layui-anim layui-icon"></i><span>男</span>
                </div>
                <input type="radio" name="gender" value="0" title="女">
                <div class="layui-unselect layui-form-radio">
                    <i class="layui-anim layui-icon"></i><span>女</span>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline col-lg-2">
                <label class="layui-form-label">修改头像</label>
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" id="upload">
                        上传头像
                    </button>
                    <input type="hidden" name="ImgSrc" id="file" />
                </div>
            </div>
            <div class="layui-inline">
                <div class="layui-upload-list">
                    <img class="layui-upload-img" width="150" height="150" id="upload_img">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-filter="addNew" lay-submit="" id="upload_imgs">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>

    <script type="text/javascript" src="~/common/laydate.js"></script>
    <script type="text/javascript" src="~/common/layui/layui.all.js"></script>
    <script type="text/javascript">

        //执行一个laydate实例
        laydate.render({
            elem: '#datetime' //指定元素
        });

        layui.config({
            base: "js/"
        }).use(['form', 'layer', "upload", 'jquery', 'layedit'], function () {
            var form = layui.form,
                layer = parent.layer === undefined ? layui.layer : parent.layer,
                laypage = layui.laypage,
                layedit = layui.layedit,
                upload = layui.upload,
                $ = layui.jquery;


            //执行实例
            var uploadInst = upload.render({
                elem: '#upload' //绑定元素
                , url: '/User/Upload' //上传接口
                , acceptMime: 'image/*'
                , size: 1024 * 2
                , before: function (obj) {
                    //预读本地文件示例，不支持ie8
                    obj.preview(function (index, file, result) {
                        $('#upload_img').attr('src', result); //图片链接（base64）
                    });
                }
                , done: function (res, index, upload) {

                    if (res.status == "ok") {
                        layer.msg("上传成功", { icon: 1, time: 2000 });
                        $("#file").val(res.data);
                    } else {
                        layer.msg("上传成功失败" + res.errorMsg, { icon: 1, time: 2000 });
                    }
                }
                , error: function () {
                    layer.msg("网络请求失败", { icon: 5, time: 2000 });
                }
            });

            //数据验证
            form.verify({
                username: function (value, item) { //value：表单的值、item：表单的DOM对象
                    if (!new RegExp("^[a-zA-Z0-9_\u4e00-\u9fa5\\s·]+$").test(value)) {
                        return '用户名不能有特殊字符';
                    }
                    if (/(^\_)|(\__)|(\_+$)/.test(value)) {
                        return '用户名首尾不能出现下划线\'_\'';
                    }
                    if (/^\d+\d+\d$/.test(value)) {
                        return '用户名不能全为数字';
                    }
                }

                //我们既支持上述函数式的方式，也支持下述数组的形式
                //数组的两个值分别代表：[正则匹配、匹配不符时的提示文字]
                , pass: [
                    /^[\S]{6,12}$/
                    , '密码必须6到12位，且不能出现空格'
                ]
            });


            //此处的addNew是38行代码中提交按钮的 lay-filter属性
            form.on("submit(addNew)", function (data) {

                var index = top.layer.msg('数据提交中，请稍候', { icon: 16, time: false, shade: 0.8 });

                var formData = $(".layui-form").serialize();    //表单数据
                var fileData = new FormData($('#form_data')[0]);

                formData.file = fileData;

                $.ajax({
                    url: "/User/AddNew",
                    method: "post",
                    dataType: "json",
                    data: formData,
                    traditional: true,//这里设置为true
                    success: function (res) {
                        if (res.status == "ok") {
                            layer.msg("添加成功", {
                                icon: 1, time: 2000, end: function () {
                                    top.layer.close(index);
                                    layer.closeAll("iframe");
                                    //刷新父页面
                                    parent.location.reload();
                                }
                            });



                        } else {
                            layer.msg("添加失败:" + res.errorMsg, {
                                icon: 5, time: 2000, end: function () {
                                    top.layer.close(index);
                                }
                            });
                        }
                    },
                    error: function () {
                        layer.msg("网络请求失败", {
                            icon: 5, time: 2000, end: function () {
                                top.layer.close(index);
                                layer.closeAll("iframe");
                                //刷新父页面
                                parent.location.reload();
                            }
                        });
                    }
                });

                return false;
            })

        })

    </script>
</body>
</html>